<template>
  <el-dialog
    width="600px"
    :close-on-click-modal="false"
    :title="title"
    @close="close"
    :visible.sync="visible"
    append-to-body
  >
    <el-form :rules="rules" :model="formData" class="four" ref="form" label-width="200px">
      <el-form-item label="图号" prop="drawingNumber">
        <el-input v-model="formData.drawingNumber" placeholder="输入图号" class="w150">
        
        </el-input>
      </el-form-item>
      <el-form-item label="品名" prop="productName">
        <el-input class="w150" v-model="formData.productName" placeholder="输入品名"></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="number">
        <el-input-number
          v-model="formData.number"
          size="small"
          placeholder
          class="w150"
          :min="0"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="材质" prop="materialQuality">
        <el-input v-model="formData.materialQuality" placeholder="输入材质" class="w150"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input class="w200" type="textarea" :row="5" v-model="formData.remark"></el-input>
      </el-form-item>
    </el-form>

    <div class="footer">
      <el-button type="primary" @click="save('formData')">提交</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>


<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { State, namespace } from 'vuex-class'

@Component({
  components: {}
})
export default class AddTools extends Vue {
  public $refs!: {
    form: any
  }

  title: string = '添加工装件'
  visible: boolean = false
  formDetail: any = {
    con: ''
  }
  rules: any = {
    drawingNumber: [{ required: true, message: '请输入图号', trigger: 'blur' }],
    number: [{ required: true, message: '请输入数量', trigger: 'blur' }],

    productName: [{ required: true, message: '请输入品名', trigger: 'blur' }],
    materialQuality: [{ required: true, message: '请输入材质', trigger: 'blur' }]
  }
  formData: any = {
    drawingNumber: '',
    number: '',
    productName: '',
    materialQuality: '',
    remark: ''
  }
  basics: any = {
    drawingNumber: 'D1118-02',
    name: 'NP-700齿轮',
    number: '5'
  }
  product: any[] = [
    {
      orderNumber: ''
    },
    {
      orderNumber: ''
    },
    {
      orderNumber: ''
    },
    {
      orderNumber: ''
    },
    {
      orderNumber: ''
    },
    {
      orderNumber: ''
    },
    {
      orderNumber: ''
    },
    {
      orderNumber: ''
    },
    {
      orderNumber: ''
    }
  ]

  open(isNew = true) {
    if (isNew) {
      this.title = '添加工装件'
    } else {
      this.title = '修改工装件'
    }
    this.visible = true
  }

  save() {
    this.$refs.form.validate((valid: any) => {
      if (valid) {
        if (this.formData.number < 1) {
          this.$alert('请输入数量至少为‘1’！', '操作提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        } else {
          this.$emit('add-tool', { ...this.formData })
         // this.visible = false
        }
      }
    })
  }
  close() {
    this.$refs.form.resetFields()

    this.visible = false
  }
}
</script>

<style lang="scss" scoped>
.el-dialog {
  margin-top: 30px;
  .el-form-item {
    margin-bottom: 22px;
  }
    .footer{
     border-top: 1px solid #eee;
    padding: 10px 20px;
    background: #fefefe;
    text-align: center;
  }
}
</style>
